<template>
  <div>
    <div class="menu">
      <div class="swiper">
        <LB />
      </div>
      <ul class="menulist">
        <li v-for="(item,key) in catemenu" :key="item.id" class="li1" @mouseenter="index=key">
          <RouterLink to="/category" class="a">{{ item.name }}</RouterLink>
          <template v-if="item.children">
            <RouterLink to="/" v-for="it in item.children" :key="it.id">{{
            it.name
          }}</RouterLink>
          </template>
          <template v-if="!item.children">
            <SkeletonView whidth="50px" height="20px" />
            <SkeletonView whidth="50px" height="20px" />
          </template>
          <div class="showcate">
            <h4>{{categoods.keys&&categoods.keys=='cate'?'分类推荐':'品牌推荐'}} <small>根据您的购买或浏览记录推荐</small></h4>
            <ul v-if="categoods.keys&&categoods.keys=='cate'">
              <li v-for="item in categoods.goods" :key="item.id">
                <RouterLink to="/" class="li">
                  <img :src="item.picture" alt="" />
                  <div class="info">
                    <p class="name ellipsis-2">{{item.name}}</p>
                    <p class="desc ellipsis">{{item.desc}}</p>
                    <p class="price"><i>¥</i>{{item.price}}</p>
                  </div>
                </RouterLink>
              </li>
            </ul>
            <ul v-if="categoods.keys&&categoods.keys=='brand'">
              <li v-for="item in categoods.goods" :key="item.id">
                <RouterLink to="/" class="li">
                  <img :src="item.picture" alt="" />
                  <div class="info">
                    <p class="name ellipsis-2">{{item.name}}</p>
                    <p class="desc ellipsis">{{item.desc}}</p>
                    <p class="price"><i>¥</i>{{item.id}}</p>
                  </div>
                </RouterLink>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      
    </div>
  </div>
</template>
<script>
import { getbrand } from '@/utils/api/homeapi'
import LB from '@/components/RoundCastChart.vue'
export default {
  components: { LB },
  data() {
    return {
      index: 0,
      BrandList: []
    }
  },
  methods: {
    async getBrandList() {
      let res = await getbrand(6)
      this.BrandList = res.result
      // console.log(this.BrandList);
    }
  },
  mounted() {
    this.getBrandList()
  },
  computed: {
    catemenu() {
      let obj = {
        id: '1221',
        name: '品牌',
        children: [
          {
            id: '122112',
            name: '品牌推荐'
          }
        ]
      }
      let list = this.$store.state.category.cate.map(item => {
        return {
          id: item.id,
          name: item.name,
          children: item.children && item.children.slice(0, 2)
        }
      })
      list.push(obj)
      return list
    },
    categoods() {
      let obj = {
        keys: '',
        goods: []
      }
      if (this.index <= 8) {
        obj.keys = 'cate'
        obj.goods = this.$store.state.category.cate[this.index].goods
      } else {
        obj.keys = 'brand'
        obj.goods = this.BrandList
      }
      return obj
    }
  },
}
</script>
<style lang="scss">
.menu {
  width: 1240px;
  height: 500px;
  // background: rgb(120, 88, 85);
  position: relative;
  white-space: pre-line;
  word-break: break-all;
  word-wrap: break-word;
  .menulist {
    position: relative;
    z-index: 99;
    width: 250px;
    background: rgba(30, 30, 25, 0.5);
    height: 500px;
    // background: salmon;
    .li1 {
      height: 50px;
      line-height: 50px;
      padding-left: 30px;
      overflow: hidden;
      white-space: pre-line;
      word-break: break-all;
      word-wrap: break-word;
      > .a {
        color: #fff;
        font-size: 17px;
        margin-right: 5px;
      }
      > a {
        color: #fff;
      }
      &:hover {
        background: #27ba9b;
        .showcate {
          display: block;
        }
      }
    }
  }
  .showcate {
    background: rgba($color: #4f5554, $alpha: 0.7);
    height: 500px;
    position: absolute;
    left: 250px;
    top: 0;
    width: 990px;
    display: none;
    z-index: 99;
    > h4 {
      font-size: 40px;
      margin-left: 25px;
      > small {
        font-size: 25px;
        color: #ddd;
      }
    }
    > ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      height: 444px;
      > li {
        line-height: 20px;
        display: flex;
        margin-right: 13px;
        width: 310px;
        height: 120px;
        background: #fff;
        white-space: pre-line;
        word-break: break-all;
        word-wrap: break-word;
        overflow: auto;

        img {
          margin: 10px 10px;
          width: 100px;
          height: 100px;
        }
        > .li {
          display: flex;
        }
        .name {
          font-size: 15px;
          font-weight: 900;
          color: #000;
        }
        .desc {
          color: rgb(159, 155, 155);
          color: #000;
        }
        .price {
          i {
            font-size: 20px;
          }
          color: #000;
          font-size: 30px;
          color: #bf4e49;
        }
        &:hover {
          background: #27ba9b;
        }
      }
    }
  }
  // &:hover {
  //   .showcate {
  //     display: block;
  //   }
  // }
  .swiper {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
